<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../thirdParty/cesium/CesiumUnminified/Cesium.js"></script>
    <link
      href="../thirdParty/cesium/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <title>Cesium Pro</title>
    <style>
      html,
      body,
      #contanier {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const opt = {
        animation: false,
        timeline: false,
        geocoder: false,
        homeButton: false,
        navigationHelpButton: false,
        baseLayerPicker: false,
        fullscreenElement: "cesiumContainer",
        fullscreenButton: false,
        shouldAnimate: false,
        infoBox: false,
        selectionIndicator: false,
        sceneModePicker: false,
        shadows: false,
        imageryProvider: false,
        contextOptions: {
          // cesium状态下允许canvas转图片convertToImage
          webgl: {
            alpha: true,
            depth: false,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
            preserveDrawingBuffer: true, // 截图时需要打开
            failIfMajorPerformanceCaveat: true,
          },
          allowTextureFilterAnisotropic: true,
        },
      }
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        70,
        5,
        130,
        60
      )
      const viewer = new Cesium.Viewer("map", opt)
      const geometry = new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(110, 30),
        radius: 1000000,
        stRotation: 0,
      })
      const appearance = new Cesium.MaterialAppearance({
        material: Cesium.Material.fromType("Color", {
          color: Cesium.Color.GOLD,
        }),
      })
      const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(110, 30)
      )
      const primitive = new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
          geometry,
          id: "circle geometry",
          name: "circle graphic",
        }),
        appearance,
      })
      viewer.screenSpaceEventHandler.setInputAction((e) => {
        const feat = viewer.scene.pick(e.position)
        console.log(feat)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      parent.p = viewer.scene.primitives.add(primitive)
    </script>
  </body>
</html>
